<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>参与投票</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-cheme/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/vote.js"></script>
</head>
<body>
<div id="app">
	<vote>
		<div id="vote" class="wrap">
			<h2>参与投票</h2>
			<ul class="list">
				<li>
					<h4>{{vote.vname}}</h4>
					<p class="info">共有 ??? 个选项，已有 ??? 个网友参与了投票。</p>
					<form method="post" action="Vote!save.action">
						<input type="hidden" name="entityId" value="103"/>
						<ol>
							<li v-for="(i,j) in vote.items">
								<input :type="vote.vtype=='单选'?'radio':'checkbox'" name="options"
									   :value="i.id" v-model="iids">
								{{i.iname}}
							</li>
						</ol>
						<p class="voteView">
							<input @click.prevent="addVote" type="image" src="images/button_vote.gif" />
							<a :href="'view.html' + location.search">
								<img src="images/button_view.gif" />
							</a></p>
					</form>
				</li>
			</ul>
		</div>
		<div class="wrap">
		</div>
	</vote>
</div>
<script>
	let app = new Vue({
		el: '#app',
		data :{
			vote : {},
			iids : []
		},
		created(){
			let url = "/vote/findById" + location.search; // ?id=xxx
			axios.get(url).then(res=> this.vote = res.data );
		},
		methods:{
			addVote(){
				let param = []
				if(!Array.isArray(this.iids)){
					// 单选题
					param.push(this.iids)
				} else {
					// 多选题
					param = this.iids;
				}
				param = param.map(value=>{
					// 将单值 value 转为对象
					return {
						iid: value, vid: this.vote.id
					};
				});
				axios.post("/record/vote", param).then(res=>{
					if(res.data.code == 1){
						location.href="view.html" + location.search;
					} else {
						alert(res.data.msg);
					}
				});
			}
		}
	});
</script>


</body>
</html>
